import React, { useEffect } from 'react'
import {connect} from 'react-redux'
import { rootState } from '@/store'
import { Dispatch } from 'redux'
import { getHomeDataAction } from '@/store/actionCreators'
import JumboTab from '@/components/JumboTabs'
import {TabBar,Wrapper} from './style'
import { Swiper } from 'antd-mobile'

interface FindProps{
  loading:boolean;
  tab:any[[]];
  img:any[];
  getHomeDataActionDispatch:()=>void;
}

const Find:React.FC<any> = (props:FindProps) => {
  let swiper=null;
  
  const {
    loading,
    tab,
  }=props 
  const tabs=tab.tabs;
  const {tuijian,imgs,haidao,bishu,zhinan,pashan,luying,manyou}=tab;
  // console.log(tab,'======')
  // console.log(imgs,'++++')
  const {
    getHomeDataActionDispatch
  }=props
  useEffect(() => {
    getHomeDataActionDispatch();
  }, [])
   
  const TabBars1=()=>{
    return(
      <div className="tabbar">
        <div className='tab'>
          <div className="link">
            <i className='iconfont icon-gonglve'></i>
            <span>找攻略</span>
          </div>
          <div className="link">
            <i className='iconfont icon-youjigonglve'></i>
            <span>看游记</span>
          </div>
          <div className="link">
            <i className='iconfont icon-jieban'></i>
            <span>去结伴</span>
          </div>
          <div className="link">
            <i className='iconfont icon-jiudiantuanfang'></i>
            <span>选酒店</span>
          </div>
          <div className="link">
            <i className='iconfont icon-jipiao'></i>
            <span>订机票</span>
          </div>
          <div className="link">
            <i className='iconfont icon-zhibo'></i>
            <span>刷直播</span>
          </div>
          <div className="link">
            <i className='iconfont icon-gonggao'></i>
            <span>看专栏</span>
          </div>
        </div>
        <div className="tab">
          <div className="link">
            <i className='iconfont icon-bangdan'></i>
            <span>必游榜</span>
          </div>
          <div className="link">
            <i className='iconfont icon-car'></i>
            <span>自驾</span>
          </div>
          <div className="link">
            <i className='iconfont icon-tubiaozhizuomoban_louying'></i>
            <span>露营</span>
          </div>
          <div className="link">
            <i className='iconfont icon-qinziyou'></i>
            <span>亲子游</span>
          </div>
          <div className="link">
            <i className='iconfont icon-Trekking'></i>
            <span>徒步</span>
          </div>
          <div className="link">
            <i className='iconfont icon-meishi'></i>
            <span>美食游</span>
          </div>
          <div className="link">
            <i className='iconfont icon-yueyehuaxue'></i>
            <span>滑雪</span>
          </div>
        </div>
    </div>
    )
  }
  const items = imgs&&imgs.map((item: { id: React.Key | null | undefined; img: string | undefined }) => (
    <Swiper.Item key={item.id} className="item">
      <img src={item.img} alt="" />
    </Swiper.Item>
  ))
  return (
    <Wrapper>
      {/* <Logo /> */}
      <div className="carousel">
        <Swiper autoplay>{items}</Swiper>
      </div>
      <TabBar>
        {TabBars1()}
      </TabBar>
      <div className="main">
      {/* {
            tab&&tab.map(tabitem=>(
              <div>{tabitem.tab}</div>
            ))
          } */}
      </div>
      <JumboTab 
        tabs={tabs} 
        tuijian={tuijian} 
        haidao={haidao} 
        bishu={bishu}
        zhinan={zhinan}
        pashan={pashan}
        luying={luying}
        manyou={manyou}
        />
    </Wrapper>
  )
}

const mapStateToProps=(state:rootState)=>({
  // console.log(state);
  tab:state.MainImg.tab,
})


const mapDispatchToProps=(dispatch:Dispatch)=>({
  // console.log(111)
  getHomeDataActionDispatch(){
    // console.log(111);
    dispatch(getHomeDataAction())
  }
})

export default connect(mapStateToProps,mapDispatchToProps)(Find)
